<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue'
import type { PurchaseDetailModel } from '@/api/purchase/purchase-list.ts'
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'

defineProps({
  showSubmit: {
    type: Boolean,
    default: false,
  },
})
const formRef = ref<FormInstance>()

// 选中销售类型时判断当前选中项并依据情况进行显示新填写框
async function changeTypeV(){

}

async function handleSubmit() {
  try {
    const values = await formRef.value?.validateFields()
    return values
  }
  catch (errorInfo) {
    console.log('Failed:', errorInfo)
  }
}

const formSales = reactive<PurchaseDetailModel>({
  purchaseId: undefined,
  purchaseType: undefined,
})

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes
  },
})

let index = 0
const items = ref(['鲁F99999', '鲁F11111', '鲁F22222'])
const value = ref()
const inputRef = ref()
const name = ref()

const addItem = e => {
  e.preventDefault()
  console.log('addItem')
  items.value.push(name.value || `New item ${(index += 1)}`);
  name.value = ''
  setTimeout(() => {
    inputRef.value?.focus()
  }, 0)
}

defineExpose({
  handleSubmit,
})
</script>

<template>
  <a-form ref="formRef" :model="formSales" @submit="handleSubmit">
    <a-row class="form-row" :gutter="20" justify="space-between">
      <a-col :span="5">
        <a-form-item name="purchaseVehicle" :rules="[{ required: true, message: '请输入采购车辆' }]" label="采购车辆">
          <a-select v-model:value="formSales.purchaseVehicle" placeholder="请选择采购车辆" :options="items.map(item => ({ value: item }))">
            <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />
              <a-space style="padding: 4px 8px">
                <a-input ref="inputRef" v-model:value="name" placeholder="请输入车辆信息" />
                <a-button type="text" @click="addItem">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  添加车辆
                </a-button>
              </a-space>
            </template>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="purchaseUser" label="采购人" :rules="[{ required: true, message: '请填写采购人' }]">
          <a-input v-model:value="formSales.purchaseUser" placeholder="请填写采购人" />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="purchaseFreight" label="本次运费总价" :rules="[{ required: true, message: '请输入运费总价' }]">
          <a-input-number :min="0" v-model:value="formSales.purchaseFreight" addon-after="￥" placeholder="请输入运费总价" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="purchaseActualAmount" label="实际采购总金额" :rules="[{ required: true, message: '请输入实际采购总金额' }]" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')">
          <a-input-number :min="0" v-model:value="formSales.purchaseActualAmount" addon-after="￥" placeholder="请输入实际采购总金额" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="20" justify="space-between">
      <a-col :span="5">
        <a-form-item name="purchaseTotalPrice" label="采购自动总价">
          <a-input-number :min="0" readonly v-model:value="formSales.purchaseTotalPrice" addon-after="￥" placeholder="自动依据下方采购明细计算金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="purchaseTotal" label="采购总斤数">
          <a-input-number :min="0" readonly v-model:value="formSales.purchaseTotal" addon-after="斤" placeholder="自动依据采购明细计算采购总斤数" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="purchaseUnitCost" label="成本单价">
          <a-input-number :min="0" readonly v-model:value="formSales.purchaseUnitCost" addon-after="￥" placeholder="自动依据计算成本单价" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="remainSettlementAmount" label="剩余结算总金额">
          <a-input-number :min="0" readonly v-model:value="formSales.remainSettlementAmount" addon-after="￥" placeholder="自动依据采购明细计算剩余结算总金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" justify="space-between">
      <a-col :span="10">
        <a-form-item name="purchaseDescribe" label="采购单描述">
          <a-textarea v-model:value="formSales.purchaseDescribe" placeholder="请填写描述信息" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-if="showSubmit">
      <a-button html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped>

</style>